<template>
  <div class="person-container">
    <h2>姓名：{{ uname }}</h2>
    <p>年龄：{{ age }}</p>
    <p>电话：{{ tel }}</p>
    <button @click="changeName">修改名称</button>
    <button @click="showTel">查看手机号</button>
  </div>
</template>

<script lang="ts">
// 引入 ref 函数
// 引入 ref 函数的目的是为了定义一个响应式的变量
// 响应式的变量是指当变量的值发生变化时，页面会自动更新
// 非响应式的变量是指当变量的值发生变化时，页面不会自动更新
// 响应式的变量需要使用 ref 函数来定义
import { ref } from 'vue'
// setup 函数中的this 是 undefined
// 所以需要使用 setup 函数中的参数 props 来获取父组件传递过来的数据
// 或者使用 defineProps 来获取父组件传递过来的数据
// 或者使用 defineEmits 来获取父组件传递过来的事件
export default {
  name: 'Person',
  setup() {
    // const uname = '张三' // 定义一个变量，用于存储姓名, 但是不是响应式的
    const uname = ref('张三') // 定义一个变量，用于存储姓名, 但是不是响应式的，使用 ref 函数来定义一个响应式的变量，但是需要引入 ref 函数
    const age = 18
    const tel = '12345678901'
    function changeName() {
      uname.value = '李四'
    }
    function showTel() {
      alert(tel)
    }
    return {
      uname,
      age,
      tel,
      changeName,
      showTel
    }
  }
}
</script>

<style scoped>
.person-container {
  /* 在这里添加组件的样式 */
  padding: 20px;
  margin: 10px;
  border: 1px solid #ccc;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
</style>